<template>
	<view class="box">
		<view class="bg"></view>
		<view class="list">
			<!-- 订单信息 -->
			<view class="order">
				<view class="order-shop card">
					<view class="title f28 bold">{{marName}}</view>
					<view class="order-list" v-for="item in orderProudct">
						<view class="shop f-w">
							<view class="shop-msg f-w">
								<image :src="item.cart_info.productAttr.image" mode=""></image>
							</view>
							<view class="shop-right">
								<view class="one fw-bt">
									<view class="shop-name f28 c333 hide-line">{{item.cart_info.product.store_name}}
									</view>
									<view class="f-w">
										<!-- <view class="price1">￥{{item.cart_info.product.price}}</view> -->
										<view class="price2 f28 bold">￥{{item.cart_info.productAttr.price}}</view>
									</view>
								</view>
								<!-- 数量 -->
								<view class="three">×{{item.refund_num}}</view>
							</view>
						</view>
					</view>
					<!-- 共5件 -->
					<view class="num fw-ct">
						共3件
					</view>
					<view class="youhui fw-bt" style="margin-top: 30rpx;justify-content: flex-end;">
						<view class="f26 f-w">

							<view class="xiaoji" style="color: #999999;">原价</view>
							<view class="f28 f-w" style="color:#999999;">
								￥
								<view class="youhui-total" style="color: #999999;text-decoration: line-through;">
									{{orderInfo.total_price}}
									<!-- <view class="sanjiao"></view> -->
								</view>
							</view>
						</view>
					</view>

					<view class="youhui fw-bt" style="margin-top: 30rpx;justify-content: flex-end;">


						<!-- 小计 -->
						<view class="f26 f-w">

							<view class="xiaoji">小计</view>
							<view class="f28 f-w" style="color: red;">
								￥
								<view class="youhui-total f40">
									{{orderInfo.pay_price}}
									<!-- <view class="sanjiao"></view> -->
								</view>
							</view>
						</view>



						<!-- <view class="">原价：{{orderInfo.total_price}}</view> -->

					</view>
				</view>

			</view>
			<!-- 支付方式 -->
			<view class="pay card" v-if="false">
				<view class="f28 bold title">支付方式</view>
				<!-- 微信 -->
				<view class="wx fw-bt">
					<view class="f-w">
						<view class="img4 f-w">
							<image src="https://jw.xzsw2021.com/static/order/icon_146@2x.png" mode=""></image>
						</view>
						<view class="f26">微信支付</view>
					</view>
					<view class="tag4">
						<image src="https://jw.xzsw2021.com/static/order/icon_145@2x.png" mode="" v-if="!pay_wx">
						</image>
						<image src="https://jw.xzsw2021.com/static/order/icon_143@2x.png" mode="" v-else></image>
					</view>
				</view>

			</view>

		</view>
		<!-- 支付 -->
		<view class="btn f-w" style="bottom: 30rpx;">
			<view class="btn-left">
				<view class="f26 fw-ct">
					<view class="b1">合计</view>
					<view class="f22 b2">￥</view>
					<view class="bold f40 b3">{{orderInfo.pay_price}}</view>
				</view>
			</view>

			<view class="btn-right f30 bold" style="flex: 1;" @click="pay">立即支付</view>
		</view>


	</view>
</template>

<script>
	import {
		getHelpBuyGroupOrderDetails,
		payHelpOrder
	} from '@/api/order.js'

	export default {
		data() {
			return {
				e: {},
				orderInfo: {},
				marName: '',
				orderProudct: []
			}
		},
		onLoad(e) {
			this.e = e
			this.orderDetails()
		},
		methods: {
			orderDetails() {
				let This = this
				getHelpBuyGroupOrderDetails(this.e.group_order_id).then(res => {
					this.orderInfo = res.data
					this.orderInfo.orderList.forEach(order => {
						This.marName = order.merchantField.mer_name
						This.orderProudct.push(...order.orderProduct)
					})
					console.log(This.orderProudct)
				}).catch(err => {

				})
			},
			pay() {
				let type = 'routine'
				// let type = 'balance'
				payHelpOrder(this.orderInfo.group_order_id, {
					type
				}).then(res => {
					let config=res.data.result.config
					console.log(config)
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						timeStamp: config.timestamp, // 时间戳（单位：秒）
						nonceStr: config.nonceStr, // 随机字符串
						package: config.package, // 固定值
						signType: config.signType, //固定值
						paySign: config.paySign, //签名
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							console.log("支付成功");
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							uni.redirectTo({
								url: '/pages/index/index'
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log("支付失败");
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					});


				}).catch(err => {
					console.log(err)
				})
			}

		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding-bottom: 140rpx;
		position: relative;

		.showColor {
			font-weight: bold;
			color: #F45E14;
		}

		.red {
			color: #F83535;
		}

		.bg {
			left: 0;
			top: 0;
			position: absolute;
			width: 750rpx;
			height: 252rpx;
			background: #109C7A;
		}

		.tag {
			margin-left: 15rpx;
			flex-shrink: 0;
			width: 11rpx;
			height: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.list {
			position: relative;
			overflow: hidden;
			z-index: 2;
		}

		.card {
			margin: 0 auto;
			width: 690rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
		}

		.msg {
			margin-top: 37rpx;
			padding: 20rpx 30rpx 35rpx;

			.msg-left {
				flex: 1;
				height: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				// background-color: #18BC37;
			}

			.msg-range {
				font-size: 22rpx;
				font-weight: 400;
				color: #F56624;
			}

			.address {
				.tag {
					margin-top: 10rpx;
				}
			}

			.uname {
				margin-top: 8rpx;
				height: 28rpx;

				.msg-phone {
					margin-left: 20rpx;
				}
			}

			.time {
				margin-top: 24rpx;
			}

			.buy-msg {
				margin-top: 36rpx;
			}
		}

		.order {
			margin-top: 20rpx;

			// padding: 28rpx 30rpx 20rpx;
			.order-shop {
				margin-top: 20rpx;
				padding: 30rpx 30rpx 36rpx;
				border-radius: 20rpx;
			}

			.mingxi {
				margin-top: 20rpx;
				padding: 30rpx 30rpx 20rpx;

				.total {
					margin-top: 36rpx;
				}
			}

			.order-list {
				margin-top: 5rpx;

				&>view:not(:first-child) {
					border-top: 1rpx solid #eee;
				}

				.shop {
					transition: 3s;
					padding: 23rpx 0;

					.shop-msg {
						width: 110rpx;
						height: 100rpx;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 100%;
							border-radius: 12rpx;
						}
					}

					.shop-right {
						margin-left: 15rpx;
						flex: 1;
						min-height: 110rpx;

						.one {
							.shop-name {
								width: 308rpx;
							}

							.price1 {
								font-size: 24rpx;
								text-decoration: line-through;
								color: #999999;
							}

							.price2 {
								margin-left: 30rpx;
							}
						}

						.two,
						.three {
							font-size: 22rpx;
							color: #666;
						}

						.two {
							margin: 6rpx 0;
							height: 28rpx;
						}
					}
				}

			}

			// 
			.num {
				width: 630rpx;
				height: 40rpx;
				margin-bottom: 26rpx;
				background: #FAFAFA;
				color: #999999;
				font-size: 22rpx;

				.tag2 {
					margin-left: 10rpx;
					width: 16rpx;
					height: 9rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			// 费
			.fee1 {}

			.fee2 {
				margin-top: 36rpx;
			}

			// 红包类型
			.demo {
				margin-top: 36rpx;

				.img1 {
					width: 28rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title2 {
					position: relative;
					margin-left: 10rpx;
					font-size: 28rpx;

					.img2 {
						top: -2rpx;
						right: -25rpx;
						position: absolute;
						width: 22rpx;
						height: 22rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.dixian {
				padding-left: 40rpx;
				margin-top: 10rpx;

				.dixian-img {
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			// 优惠
			.youhui {
				margin-top: 82rpx;

				.yyh {
					margin-top: 2rpx;
				}

				.xiaoji {
					// margin-top: 4rpx;
				}

				.youhui-total {
					position: relative;
				}

				.sanjiao {
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-bottom: 20rpx solid #FDECD7;
					border-right: 12rpx solid transparent;
					border-left: 12rpx solid transparent;
				}
			}

			.yh-plus {
				margin-top: 20rpx;
				width: 630rpx;
				padding: 0 13rpx;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 26rpx;
				background: linear-gradient(0deg, #FFE0B4 0%, #FDECD7 100%);
				border-radius: 8rpx;
				box-sizing: border-box;

				.img3 {
					width: 30rpx;
					height: 26rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tag3 {
					margin: 0 10rpx;
					width: 1rpx;
					height: 25rpx;
					background: #4D2F12;
				}
			}
		}

		// 备注
		.note {
			margin-top: 36rpx;

			.note-text {
				max-width: 500rpx;
			}
		}

		// 支付方式
		.pay {
			margin-top: 20rpx;
			padding: 30rpx 30rpx 10rpx;

			.img4 {
				margin-right: 30rpx;
				width: 50rpx;
				height: 50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tag4 {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.wx {
				padding: 40rpx 0;
			}

			.yue {
				border-top: 1rpx solid #eee;
				padding: 40rpx 0;
			}
		}

		// 支付
		.btn {
			position: fixed;
			bottom: 0;
			left: 30rpx;
			width: 690rpx;
			height: 110rpx;
			// background: #FFFFFF;
			background-color: #f9ffff;
			border-radius: 55rpx;
			text-align: center;
			z-index: 11;

			.btn-left {
				width: 350rpx;

				.b1 {
					margin-top: 2rpx;
				}

				.b2 {
					margin-top: 12rpx;
				}
			}

			.btn-mid,
			.btn-right {
				width: 170rpx;
				height: 110rpx;
				line-height: 110rpx;
				color: #fff;
				background: linear-gradient(54deg, #7EDBC5, #6CD3BB);
			}

			.btn-right {

				background: linear-gradient(64deg, #2BCCA5, #22B591);

				border-radius: 0rpx 55rpx 55rpx 0rpx;
			}
		}

		// 备注弹窗
		.pop1 {
			width: 620rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			.title {
				margin-top: 35rpx;
			}

			textarea {
				margin: 20rpx auto;
				width: 551rpx;
				min-height: 270rpx;
				padding: 18rpx 18rpx;
				font-size: 28rpx;
				background: #F5F5F5;
				box-sizing: border-box;
			}

			.pop-btn {
				border-top: 1rpx solid #eee;

				&>view {
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: #999;
				}

				.btn2 {
					border-left: 1rpx solid #eee;
					color: #F31E1E;
				}
			}
		}

		// 说明弹窗
		.pop2 {
			.pop2-content {
				width: 560rpx;
				padding: 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
			}

			.pop2-close {
				margin: 22rpx auto 0;
				width: 58rpx;
				height: 58rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 配送时间弹窗
		.pop3 {
			position: relative;
			width: 750rpx;
			height: 540rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			overflow: hidden;

			.green2 {
				color: #109C7A;
			}

			.pop3-close {
				position: absolute;
				top: 15rpx;
				right: 30rpx;
				width: 38rpx;
				height: 38rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.pop3-title {
				margin-top: 36rpx;
			}

			.pop3-box {
				height: 458rpx;
				font-size: 28rpx;

				.pop3-left {
					width: 140rpx;
					height: 458rpx;
					background-color: #FAFAFA;

					&>view {
						padding: 30rpx 0;
					}
				}

				.pop3-right {
					flex: 1;
					height: 458rpx;
					overflow-y: auto;

					&>view {
						padding: 30rpx 30rpx;
					}

					.pop3-img {
						width: 38rpx;
						height: 34rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		// 红包弹窗
		.pop4 {
			width: 750rpx;
			height: 745rpx;
			padding: 30rpx 0 0;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			box-sizing: border-box;

			.pop4-close {
				position: absolute;
				top: 15rpx;
				right: 30rpx;
				width: 38rpx;
				height: 38rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.pop4-list {
				margin-top: 30rpx;
				padding: 0 30rpx;
				height: 640rpx;
				overflow-y: auto;
			}

			.pop4-card {
				position: relative;
				width: 690rpx;
				min-height: 186rpx;
				background: #FFFFFF;
				border: 1rpx solid #FD9D9D;
				border-radius: 10rpx;
				margin-top: 20rpx;
				padding: 23rpx 28rpx 23rpx 0;
				box-sizing: border-box;

				.pop4-img {
					position: absolute;
					left: -15rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 30rpx;
					height: 30rpx;
					background-color: #fff;

					image {
						width: 100%;
						height: 100%;
					}

					z-index: 12;
				}

				.left {
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-right: 1rpx dashed #CCCCCC;
					text-align: center;
					color: #F83535;

					.price {
						margin-top: 28rpx;
					}

					.tj {
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #666;
					}
				}

				.right {
					position: relative;
					flex: 1;
					margin-left: 30rpx;
					font-size: 28rpx;

					.two {
						margin: 28rpx 0;
						color: #666;
					}

					.three {
						color: #999;
						font-size: 24rpx;
						overflow: hidden;

						.desc {
							flex: 1;
							width: 420rpx;
						}

						.icon {
							flex-shrink: 0;
							margin-left: 20rpx;
							width: 26rpx;
							height: 14rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>
